<template>
  <div>
    <!-- 轮播图组件 -->
    <Carousel />
    <!-- 搜索框组件 -->
    <Search />
    <!-- 底部展示医院的结构 -->
    <el-row :gutter="20">
      <!-- 左侧结构 -->
      <el-col :span="19">
        <!-- 医院等级组件 -->
        <Level @get-level="getLevel" />
        <!-- 地区组件 -->
        <Region @get-region="getRegion" />
        <!-- 医院信息 -->
        <div class="hospital">
          <!-- 医院列表卡片组件 需要将获取到的医院列表的数据传递给子组件 -->
          <!-- 骨架屏 代替加载效果 -->
          <el-skeleton :loading="loading" animated :rows="10">
            <template #default>
              <Card
                :hasHospitalArr="hasHospitalArr"
                v-if="hasHospitalArr.length"
              />
              <!-- 没有医院时展示的图片 -->
              <el-empty v-else :image-size="200" description="暂无医院数据" />
            </template>
          </el-skeleton>
          <!-- 分页器 -->
          <div class="pagination">
            <el-pagination
              v-model:current-page="pageNo"
              v-model:page-size="pageSize"
              :page-sizes="[10, 15, 20]"
              :background="true"
              layout="prev, pager, next, jumper,->, sizes, total"
              :total="total"
              @size-change="getHospital(1)"
              @current-change="getHospital()"
            />
          </div>
        </div>
      </el-col>
      <!-- 右侧结构 -->
      <el-col :span="5">
        <Tip />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="Home">
// 引入轮播图组件
import Carousel from './carousel/index.vue'
// 引入搜索组件
import Search from './search/index.vue'
// 引入医院等级组件
import Level from './level/index.vue'
// 引入地地区组件
import Region from './region/index.vue'
// 引入医院列表组件
import Card from './card/index.vue'
// 引入右侧提示组件
import Tip from './tip/index.vue'
import { onMounted, ref } from 'vue'
import { reqHospital } from '@/api/home'
import { ElMessage } from 'element-plus'
import type { Content } from '@/api/home/type'

// 分页器当前页码
let pageNo = ref(1)
// 分页器一页展示多少条数据
let pageSize = ref(10)
// 分页器总条数
let total = ref(0)
// 存储医院列表的数据
let hasHospitalArr = ref<Content>([])
// 控制骨架屏的加载效果
let loading = ref(true)
// 存储获取子组件的医院等级的值
let levelValue = ref('')
// 存储获取子组件的医院地区的值
let districtCode = ref('')

// 获取医院列表数据的方法(默认获取当前页数据,需要获取第一页数据时传入1即可)
const getHospital = async (pager = pageNo.value) => {
  pageNo.value = pager
  // 开启骨架屏加载效果
  loading.value = true
  // 发请求获取医院列表数据
  let result = await reqHospital(
    pageNo.value,
    pageSize.value,
    levelValue.value,
    districtCode.value,
  )
  // 获取数据成功
  if (result.code === 200) {
    // 存储获取到的数据
    // 总条数
    total.value = result.data.totalElements
    // 医院列表
    hasHospitalArr.value = result.data.content
    // 关闭骨架屏加载效果
    loading.value = false
  } else {
    ElMessage.error('获取医院列表失败')
  }
}
// 自定义事件get-level回调
const getLevel = (level: string) => {
  // 存储子组件传递的医院等级值
  levelValue.value = level
  // 获取医院列表
  getHospital()
}
// 自定义事件get-region回调
const getRegion = (region: string) => {
  // 存储子组件传递的医院地区的值
  districtCode.value = region
  // 获取医院列表
  getHospital()
}
// 组件挂载完毕获取医院列表数据
onMounted(() => {
  getHospital()
})
</script>

<style scoped lang="scss">
.hospital {
  margin-bottom: 20px;
}
</style>
